<script setup lang="ts">
import { useTimeStore } from "@renderer/store/modules/time";
import { useAppStore } from "@renderer/store/modules/app";
import { TimerMode, TimerStatusMode } from "@renderer/types/GlobalEnum";

const appStore = useAppStore();
const timeStore = useTimeStore();
</script>
<template>
    <div class="box">
        <div class="menu">
            <button class="menu-item RefreshLeft" @click="timeStore.refresh()">
                <el-icon :size="20"><RefreshLeft /></el-icon>
            </button>
            <button class="menu-item" @click="timeStore.refresh_start()">
                <el-icon :size="20"><Refresh /></el-icon>
            </button>
            <button class="menu-item">
                <el-icon :size="20">
                    <VideoPause
                        @click="timeStore.stop()"
                        v-if="
                            timeStore.status === TimerStatusMode.start ||
                            timeStore.status === TimerStatusMode.timeout
                        "
                    />
                    <VideoPlay @click="timeStore.start()" v-else />
                </el-icon>
            </button>
            <button
                class="menu-item"
                @click="appStore.changeMode(TimerMode.nomal)"
            >
                <el-icon :size="20"><CircleClose /></el-icon>
            </button>
        </div>
    </div>
</template>
<style scoped>
.box {
    display: flex;
    justify-content: center;
}

.menu {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 160px;
    min-width: 160px;
    height: 40px;
    min-height: 40px;
    color: #030303;
    background-color: #f0efef;
    border-radius: 12px;
}

.menu-item {
    display: flex;
    cursor: pointer;
    border: 0;
    border-radius: 50%;
}

.menu-item:active {
    transform: scale(1.2);
}
</style>
